<template>
  
       <div class="list">
            <ul>
                <li v-for="(item,index) in list" :key="index" @click="change(index)">
                    <img :src="item.pic" alt="">
                    <div>
                        <p class="p1">{{item.name}}</p>
                        <p class="p2">{{item.point}}</p>
                        <span class="p3">{{item.price}}</span><span class="p4">{{item.time}} {{item.length}}</span>
                    </div>
                </li>
            </ul>
        </div> 
   
</template>

<script>
import pic from "../assets/4.png"
export default {
    data(){
        return{
             list:[
            {name:"一点点",pic,point:"☆4.3",price:"起送￥20",time:"47分钟",length:"3.3Km",sum:"3.3"},
            {name:"麦当劳",pic,point:"☆4.6",price:"起送￥0",time:"28分钟",length:"2.3Km",sum:"2.3"},
            {name:"蜜雪冰城",pic,point:"☆4.8",price:"起送￥15",time:"32分钟",length:"1.4Km",sum:"1.4"},
            {name:"故事里的炸鸡",pic,point:"☆5.0",price:"起送￥1",time:"30分钟",length:"335m",sum:"0.335"},

            ],
        }
    },
    methods:{
        change(index){
            if(index==1){
                console.log(index);
                this.list.sort((a,b)=>{
                    return a.sum - b.sum;
                })
            }
        }
    }
            
}
</script>

<style lang="scss" scoped>
     .list{
            padding-bottom:40px ;
        }
        .list li {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }
        .list li img{
            width: 97px;
            height: 97px;
            margin: 0 5px;
        }
        .list li .p1{
            font-size: 18px;
            font-weight: bold;
            padding-left: 10px;
        }
        .list li .p2{
            font-size: 14px;
            color: orangered;
            padding-left: 10px;
            margin-top: 5px;
        }
        .list li .p3,.p4{
            font-size: 15px;
            font-weight: normal;
            color: #ccc;
        }
    
</style>